Accidental Dismissal of Overlays: A Common Mobile Usability Problem 意外關閉覆蓋層

覆蓋層（Overlays）作為移動端介面設計中的一種重要元素，廣泛用於導航選單、底部彈窗、產品詳情頁或應用內瀏覽器等場景。但其關閉方式常常與使用者的預期不符，可能引發誤操作並導致使用者體驗問題。

amcy應用程式（左）使用部分覆蓋來顯示購物車，而諾德斯特龍網站（右）使用完全覆蓋來展示產品影象。
HM.com使用了部分覆蓋來實現用於主導航的順序選單。
Facebook for iOS：在新聞推送中點選一篇文章（左），它會在全屏覆蓋層中顯示（右）。
谷歌地圖移動應用使用模態覆蓋層來顯示排序選項（左），並使用非模態覆蓋層來顯示特定位置的資訊（在此例中為尼爾森·諾曼集團——右）。這兩種覆蓋層都是底部工作表的示例——特定於應用程式的覆蓋層，出現在螢幕底部。

覆蓋層的型別

  1. 部分覆蓋層（Partial Overlays）：佔據頁面的一部分，背景內容仍可見。例如，Macy’s 應用在購物車展示中採用部分覆蓋層。
  1. 全屏覆蓋層（Full Overlays）：佔據整個螢幕，幾乎無法與普通頁面區分。例如，Facebook 在文章閱讀中使用全屏覆蓋層。

覆蓋層的模態性質

  1. 模態覆蓋層（Modal Overlays）：使用者無法與背景內容互動。
  1. 非模態覆蓋層（Nonmodal Overlays）：使用者可以與背景內容互動。

常見的關閉方式

覆蓋層關閉引發的問題

1. 使用者選擇錯誤的關閉方式

使用者往往無法預測哪種關閉方式能實現預期目標。例如：

沃爾瑪應用案例：使用者點選“X”按鈕關閉覆蓋層，卻導致所有覆蓋層關閉，而不是僅關閉頂層覆蓋層。

LinkedIn 應用案例：使用者使用裝置的“返回”按鈕關閉子選單，卻直接退出到初始頁面，丟失之前的導航記錄。

Instagram 應用案例：使用者在多層覆蓋層中選擇了錯誤的關閉按鈕，意外返回到應用主介面，而非返回上一層覆蓋層。

2. 使用者工作丟失

當使用者選擇了錯誤的關閉方式時，可能導致輸入或運算元據丟失。例如：

3. 覆蓋層堆疊加劇混亂

多層覆蓋層的堆疊容易導致使用者迷失。例如：

Google Maps 案例：使用者試圖關閉餐廳詳情頁並返回餐廳列表，但卻關閉了所有覆蓋層並返回地圖檢視，需重新執行搜尋。

如何防止覆蓋物關閉問題 How to Prevent Overlay-Dismissal Problems

1. 使用替代設計模式

避免使用覆蓋層，優先選擇其他設計方式：

獨立頁面設計：例如，沃爾瑪的產品詳情頁可設計為獨立頁面，避免使用覆蓋層。

摺疊式手風琴選單：例如，Nordstrom 應用使用手風琴佈局展示商品評論和其他資訊。

2. 優先選擇部分覆蓋層

部分覆蓋層更易被識別，減少誤用“返回”按鈕的可能性。但需注意：對於需要滾動的內容，部分覆蓋層可能增加使用者操作複雜度。

3. 避免堆疊覆蓋層

儘量避免多層覆蓋層的使用，以減少使用者因混亂關閉整個覆蓋層棧的風險。

4. 提供明確的關閉按鈕

在覆蓋層中新增清晰的“關閉”按鈕（如 X 按鈕），避免僅依賴手勢操作來關閉覆蓋層。

最佳實踐：Best Buy 應用在覆蓋層頂部提供了明顯的“關閉”按鈕。

5. 支援裝置內建“返回”按鈕

允許使用者透過瀏覽器或裝置的“返回”按鈕關閉覆蓋層，而非直接返回上一級頁面。例如：

Dillards 網站：支援瀏覽器的“返回”按鈕關閉覆蓋層並返回商品詳情頁。

結論

覆蓋層是移動端常用的設計元素，但其多樣的關閉方式和堆疊設計容易導致使用者誤操作、工作丟失等問題。為提升使用者體驗，建議：

儘量避免使用覆蓋層，選擇獨立頁面或手風琴佈局。

若必須使用覆蓋層，應：提供清晰的“關閉”按鈕。支援裝置的“返回”功能關閉覆蓋層。透過最佳化設計，可有效減少使用者的困惑和操作失誤，提高互動體驗